<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_事件监听</title>
</head>
<body>
  <button onclick="alert('你点击了按钮1')">按钮1</button>
  <button id="btn">按钮2</button>
  <hr>
  <h4>今天星期三</h4>
  <span>震惊：最强台风来袭...</span>
  <h4>明天星期四</h4>
  <div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto deleniti deserunt dignissimos, eius,
      fugit ipsa iste magnam molestiae molestias nostrum pariatur quas quisquam totam ullam. A ex magni maiores.
    </div>
    <div>A animi assumenda blanditiis enim est incidunt labore, maiores minus mollitia nulla odio pariatur rerum sint
      veniam, veritatis. Dolorem illum ipsum neque obcaecati omnis perspiciatis quo reiciendis unde vero vitae.
    </div>
    <div>A accusantium amet cum cupiditate debitis delectus explicabo hic, inventore itaque laboriosam libero magnam
      nesciunt nostrum recusandae repellat repudiandae, vel veniam vero! Dignissimos illo ipsum magni nobis obcaecati
      pariatur, perspiciatis.
    </div>
    <div>Distinctio excepturi labore laudantium odit officia quod voluptatem. Accusantium amet at autem distinctio
      dolorum, eveniet id iusto molestiae nihil obcaecati odio praesentium provident reprehenderit rerum vitae voluptas
      voluptatibus. Est, veniam.
    </div>
    <div>Ad atque, beatae cupiditate debitis delectus, deserunt distinctio dolor dolorum eaque eligendi eos
      exercitationem facere hic illum incidunt inventore iure labore natus nihil nulla obcaecati ratione repellat sequi
      soluta temporibus?
    </div>
    <div>Alias aliquam architecto, beatae consequuntur dolorem dolores eius eligendi et explicabo hic ipsam
      necessitatibus nostrum pariatur placeat porro quos reprehenderit rerum sit tenetur vel vero vitae voluptates
      voluptatibus. Eligendi, quasi.
    </div>
    <div>Accusamus aperiam cum deserunt dolorum ducimus eaque eligendi hic itaque magni maxime molestiae quisquam quos
      rem sapiente sint tempora temporibus, ullam veritatis! Dolore est in ipsam maxime natus neque omnis.
    </div>
    <div>Accusantium asperiores aspernatur atque beatae eos error eum exercitationem explicabo nesciunt porro quibusdam,
      sapiente similique voluptas. Est harum ipsa laudantium optio repellendus. Architecto consequuntur, fugiat impedit
      inventore molestiae repellat veritatis.
    </div>
    <div>Blanditiis delectus dolores ea labore molestias ratione recusandae saepe, veniam! Architecto atque autem
      corporis, cum debitis dignissimos fugit magnam, pariatur quaerat qui quod reiciendis repellat sed tempore totam
      vero voluptate?
    </div>
    <div>Cumque deleniti distinctio dolores excepturi facilis, minus nihil quam recusandae repudiandae soluta suscipit
      vitae, voluptate! Cum cupiditate eveniet fugiat impedit, maiores minus molestias officiis omnis pariatur
      perferendis sed sequi totam!
    </div>
    <div>Ab ad alias animi aperiam beatae blanditiis consectetur cumque dolore dolores dolorum explicabo id illum
      impedit incidunt ipsa iste laborum perspiciatis provident, quisquam repellendus similique soluta temporibus
      tenetur veritatis voluptatibus?
    </div>
    <div>Aliquam aperiam asperiores consequatur, dolorem earum eum ex id in inventore iste iure minima necessitatibus
      nostrum placeat qui quia quibusdam repellat saepe tempore voluptas. Autem excepturi facilis provident repellendus
      sunt.
    </div>
    <div>Aspernatur cumque deleniti dignissimos, dolorem et explicabo hic incidunt laudantium nesciunt optio quia,
      quisquam quod rem saepe vitae voluptates voluptatibus. Accusamus adipisci atque aut harum nemo veniam veritatis
      vitae voluptatibus?
    </div>
    <div>Debitis deleniti deserunt enim libero nihil numquam recusandae sint, soluta. Alias animi blanditiis corporis
      cumque dolores, ea eius error est facilis fugiat impedit molestiae neque, obcaecati quidem quos recusandae
      temporibus?
    </div>
    <div>A adipisci et eveniet ex facere nesciunt odio, officia possimus praesentium quam. Dignissimos exercitationem
      laudantium provident? Aperiam cumque eius eum maiores mollitia nam necessitatibus optio sequi ullam veritatis.
      Facere, nobis!
    </div>
    <div>Ab aut culpa dignissimos dolorem ducimus enim facere facilis fugit impedit in, incidunt inventore ipsum,
      laboriosam, molestias nam necessitatibus neque odit quae quas quibusdam quos repellat totam voluptas voluptate
      voluptatum.
    </div>
    <div>Aliquam amet consequuntur doloribus eos eum, magni nemo soluta. Odio quaerat repellendus voluptatibus. Ducimus
      harum non quia sed voluptatem? Accusantium dolorem, esse ex exercitationem facere obcaecati officiis pariatur quis
      quod.
    </div>
    <div>Ad amet autem delectus, dicta dignissimos distinctio doloremque ea error eveniet explicabo illo incidunt ipsam,
      laboriosam molestiae molestias natus nemo nulla provident qui, quod recusandae repudiandae sunt tempora tenetur
      ullam.
    </div>
    <div>Beatae doloremque quas quo rerum! Accusamus adipisci beatae commodi consequuntur excepturi, iste itaque nobis
      perferendis placeat quidem quod, repellat sint totam. Aliquid culpa enim excepturi maiores nihil, perspiciatis sit
      unde.
    </div>
    <div>Adipisci at consequatur cupiditate eum id neque odit praesentium quidem quisquam veniam? Dignissimos labore
      optio unde velit voluptates. Accusamus adipisci debitis distinctio exercitationem impedit ipsam iure labore
      laudantium, pariatur perspiciatis.
    </div>
    <div>Aliquid animi aperiam consequuntur cum ea earum eum fugit impedit inventore ipsum iste magnam maxime modi nemo
      nostrum officiis possimus provident quasi, repellendus sapiente suscipit tempora, temporibus ullam veritatis
      voluptates.
    </div>
    <div>Ab commodi, dolore hic, libero minima, modi nam nemo nulla odit quaerat sapiente veritatis voluptas
      voluptatibus. Aliquam delectus deleniti distinctio eum fugit impedit quis repudiandae rerum sit? At, nostrum,
      similique!
    </div>
    <div>Ab accusamus amet aperiam asperiores aspernatur, atque autem distinctio dolorem ducimus eos eum facere illum
      laboriosam nam necessitatibus officia pariatur perspiciatis quae quidem quisquam, quos repellat reprehenderit
      suscipit totam ut?
    </div>
    <div>Accusamus amet commodi consequatur corporis eligendi explicabo hic maxime, mollitia nam, odit officiis, quasi
      quibusdam quis rerum sit voluptas voluptates. A consequuntur ducimus fuga ipsam minus neque pariatur quaerat rem.
    </div>
    <div>Fuga hic nemo quo. Accusantium consectetur consequuntur cumque debitis libero magnam maxime quia quod
      repudiandae temporibus. A aspernatur maiores perferendis quam. Aliquam consectetur culpa excepturi facilis modi
      neque quidem tenetur.
    </div>
    <div>Deleniti doloremque error explicabo incidunt magni natus non pariatur saepe ut? Accusantium aliquam asperiores
      aut delectus, ducimus est harum hic illo, iste laborum perspiciatis provident rem sequi suscipit vero, voluptate.
    </div>
    <div>Accusamus assumenda atque, consectetur consequuntur cum debitis delectus distinctio dolor doloribus eaque enim
      eum facere itaque iure magnam nam natus perferendis perspiciatis porro praesentium ratione, repudiandae temporibus
      veritatis vero voluptate.
    </div>
    <div>Ad aliquam animi cum cumque deleniti, dolore eligendi excepturi facilis impedit nemo nesciunt nobis
      perspiciatis quasi quibusdam reiciendis temporibus veritatis vitae? Earum id iste minima nobis provident quasi
      similique velit.
    </div>
    <div>Aperiam eum sapiente temporibus! Alias ipsa iusto nemo nihil reprehenderit rerum veniam! Ad debitis, earum, ex
      hic id itaque laboriosam magni quae qui quibusdam quos ratione repudiandae sapiente temporibus unde.
    </div>
    <div>Alias asperiores laborum neque, nihil praesentium qui quibusdam sapiente tempora ut vitae. Deleniti dicta ex
      possimus quas voluptatum? Architecto, corporis doloremque dolores doloribus quod rem tempore! A alias fuga
      laudantium.
    </div>
    <div>A explicabo inventore laboriosam minima voluptatem? Autem blanditiis debitis, doloribus dolorum expedita hic
      magnam, maiores minus nihil quos, veritatis voluptate? Autem deleniti dolorem doloremque laborum minima nesciunt
      quisquam totam velit.
    </div>
    <div>Consectetur doloremque eligendi hic ipsum labore magni! Aliquid architecto, deleniti eaque earum eum eveniet
      laborum magnam, modi molestiae, molestias non obcaecati officia placeat possimus quam suscipit tempora velit
      voluptas? Accusamus?
    </div>
    <div>Accusantium debitis dolorem excepturi explicabo fuga minus obcaecati? Accusamus cum dicta distinctio esse est
      facilis illo in, maiores nemo neque obcaecati optio perspiciatis, qui quisquam saepe ullam unde velit voluptates?
    </div>
    <div>Consequuntur corporis nihil nobis sit vero, voluptatibus. Architecto, at aut, dolorem dolores eum impedit ipsum
      nulla numquam quo reprehenderit repudiandae ut. Ab aut, exercitationem ipsam laudantium maiores molestiae sequi
      sunt.
    </div>
    <div>Accusamus alias aperiam blanditiis commodi consequuntur cum, debitis doloremque dolores earum eius eligendi eum
      exercitationem explicabo minima mollitia placeat quae quaerat quasi qui quo sapiente sit temporibus? Earum,
      nostrum, voluptas!
    </div>
    <div>Aperiam, consequatur, dicta earum exercitationem facere facilis impedit minus optio placeat recusandae sequi
      temporibus? Alias hic ipsa libero, nihil quidem sed sit velit veritatis. Alias aperiam cupiditate nihil suscipit.
      Ea.
    </div>
    <div>Aliquam aliquid, animi commodi dolorem eaque eum, illo ipsum itaque maiores molestiae mollitia natus non omnis,
      quae quos rem repellat repellendus sapiente tenetur ullam ut vel vero? Deserunt ducimus, voluptatem.
    </div>
    <div>A atque blanditiis doloremque doloribus eaque, eligendi, error excepturi fugit hic ipsam iste modi molestias
      natus nesciunt omnis porro quaerat quasi quidem quos sunt tempora, tempore velit voluptas. Ab, illo.
    </div>
    <div>Accusamus amet architecto, autem consequatur culpa deleniti earum eos esse ex incidunt inventore nam, nesciunt
      nisi non officia pariatur possimus quam quasi reiciendis reprehenderit sed sit suscipit ullam ut, vero?
    </div>
    <div>Animi asperiores beatae dolorem est exercitationem harum illo magni necessitatibus quisquam, recusandae,
      repellendus velit veritatis voluptatibus? Accusantium doloribus, ipsam iure molestias mollitia porro possimus quae
      repudiandae sed sequi? Blanditiis, eum!
    </div>
    <div>Assumenda at consectetur corporis deleniti distinctio doloribus ea ex expedita facere fuga illo ipsum, itaque
      iusto labore maiores maxime minus mollitia non optio provident quo repellendus reprehenderit vero voluptas
      voluptate?
    </div>
    <div>Aperiam eos esse, ipsa iusto nostrum placeat recusandae rem repellat ullam! Ab architecto cum eaque facere
      ipsum iste, maxime minus molestiae nostrum quis repellendus, repudiandae, rerum suscipit ullam voluptates. Dolor?
    </div>
    <div>Aliquam, aliquid architecto corporis deleniti earum esse ex explicabo facere fugit inventore iusto labore
      laboriosam nostrum obcaecati odio odit porro possimus quas ratione recusandae repellat sequi soluta velit
      voluptate voluptatum!
    </div>
    <div>Ab accusamus alias aliquam animi beatae corporis distinctio dolor dolore doloribus eligendi facilis hic id
      laudantium libero maxime officia, quae quaerat, quos ratione repellat reprehenderit repudiandae sed sint veritatis
      voluptas?
    </div>
    <div>Aliquid at debitis deleniti dolorum est, illo magni maxime nostrum perspiciatis, placeat provident repudiandae
      rerum velit voluptate voluptatum. Aspernatur earum ex illo, in itaque libero pariatur repellendus ullam velit
      voluptatem.
    </div>
    <div>Aliquam blanditiis cum dignissimos doloremque earum enim expedita iure laboriosam nobis, nulla provident
      recusandae sed suscipit veniam veritatis. A alias amet consequuntur cupiditate enim harum quae, qui tempore
      veritatis vitae!
    </div>
    <div>A accusamus amet architecto aspernatur atque, aut dignissimos est explicabo inventore itaque iusto libero minus
      nam numquam provident quam quisquam sunt tempore, veritatis vitae? Assumenda eveniet ex natus odit similique.
    </div>
    <div>Accusantium, aspernatur autem cumque dignissimos, eligendi illo illum impedit inventore laboriosam molestiae
      nam natus necessitatibus nemo, non quod reiciendis repudiandae sapiente sequi tempore ut. Beatae enim molestiae
      odio officiis perspiciatis.
    </div>
    <div>At commodi ducimus eligendi eveniet illo, labore, maiores necessitatibus nobis perferendis perspiciatis
      praesentium quaerat quisquam reprehenderit sed sint sunt, ut voluptatibus! Aspernatur consequatur corporis facere
      fugit modi odio quos repudiandae.
    </div>
    <div>Dolores harum impedit laboriosam provident quibusdam quis temporibus unde ut velit! Ad asperiores atque
      distinctio eligendi facere ipsam itaque iure laborum, magnam mollitia nostrum numquam ratione repellat tempora
      vel? Nisi.
    </div>
  </div>
  <script>
    let btn = document.getElementById('btn');
    btn.addEventListener('click', function () {
      alert('你点击了按钮2');
    })
    let spanE = document.querySelector('span');
    spanE.addEventListener('mouseover', function () {
      console.log('鼠标移入');
    })
    window.addEventListener('scroll', function (){
      console.log('页面被滚动了');
    })
    window.addEventListener('resize', function (){
      console.log('页面大小被调整了');
    })
  </script>
</body>
</html>
